<template>
    <div class="top_big_box">
        <!--最上边的菜单栏-->
        <div class="top_menu">
            <el-menu
                :default-active="this.$route.path"
                router
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
            >
                <el-menu-item index="/">商城</el-menu-item>
                <el-menu-item index="/shopCart">购物车</el-menu-item>
                <el-menu-item index="/order">订单</el-menu-item>
                <el-menu-item index="/userInfo">个人信息</el-menu-item>
            </el-menu>
        </div>
        <div class="personal_center" v-if="user.username != null">
            <div class="head_div">
                <el-avatar :size="40" :src="user.headPic" style="margin-top: 9px"/>
            </div>
            <div class="my_info" style="height: 59px;">
                <el-dropdown style="line-height: 59px;height: 59px;">
                <span class="el-dropdown-link" style="line-height: 59px;height: inherit">
                    <span class="username_div">{{ user.username }}</span><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="this.$router.push('/userInfo')">个人信息</el-dropdown-item>
                            <el-dropdown-item @click="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="personal_center" v-else>
            <div class="login_tip" style="line-height: 59px">
                登录享更多哦
            </div>
        </div>
    </div>
</template>

<script>
//导入css
import '@/assets/css/header.css';
import request from "@/utils/request";

export default {
    data() {
        return {
            form: [],
            user: null,
            name: "Header",
        }
    },
    watch: {
        message() {
            console.log("user:" + this.user)
        }
    },
    props: {
        user: {
            type: Object,
            default: {}
        }
    },
    methods: {
        handleSelect() {
        },
        logout() {
            window.localStorage.removeItem("access-user");
            location.reload();
        }
    }
}
</script>

<style scoped>

</style>